<!--这是产品详情组件-->
<template>
  <div>
    <div @click="example=!example" style="margin-bottom:10px;color:blue; cursor:pointer">{{example ? '收起示例' : '查看示例'}}</div>
    <div v-if="example">
      <div style="margin-top:15px;margin-bottom:10px;">以鞋子为例：</div>
      <div v-for="item in exam.specs" style="border:1px solid #d8dce5;border-radius:5px;margin-bottom:10px;padding: 5px 0;">
        <el-form-item label-width="140px" label="规格名称：" style="margin:0">{{item.name}}</el-form-item>
        <el-form-item label-width="140px" label="规格子项：" style="margin:0">
          <span v-for="em in item.itemName" style="margin-right:50px;">{{em}}</span>
        </el-form-item>
      </div>
      <table style="width:100%;border-color:#eaeff0;text-align:center;" border="1" cellspacing="0">
        <tr style="font-size:15px;color:#5a5e66;height:40px;">
          <th>{{exam.specs[0].name}}</th>
          <th>{{exam.specs[1].name}}</th>
          <th>库存</th>
          <th>原价</th>
          <th>价格</th>
        </tr>
        <tr v-for="item in exam.infos" style="height:40px;">
          <td>{{item[0]}}</td>
          <td>{{item[1]}}</td>
          <td>{{item[2]}}</td>
          <td>{{item[3]}}</td>
          <td>{{item[4]}}</td>
        </tr>
      </table>
      <hr style="margin:30px 0;">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      example: false,
      exam: {
        specs: [
          {name: '颜色', itemName: ['红色', '白色']},
          {name: '尺码', itemName: ['39码', '40码', '41码']}
        ],
        infos: [
          ['红色', '39码', '300', '180', '127'],
          ['红色', '40码', '200', '180', '127'],
          ['红色', '41码', '50', '180', '127'],
          ['白色', '39码', '200', '180', '127'],
          ['白色', '40码', '150', '180', '127'],
          ['白色', '41码', '80', '180', '127']
        ]
      }
    }
  }
}
</script>
